.duration-200 {
  transition-duration: 200ms;
  animation-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
  animation-duration: 300ms;
}

.duration-400 {
  transition-duration: 400ms;
  animation-duration: 400ms;
}

.duration-500 {
  transition-duration: 500ms;
  animation-duration: 500ms;
}

.duration-600 {
  transition-duration: 600ms;
  animation-duration: 600ms;
}

.duration-700 {
  transition-duration: 700ms;
  animation-duration: 700ms;
}

.duration-800 {
  transition-duration: 800ms;
  animation-duration: 800ms;
}

.animate-slide-up {
  animation-name: slideUp;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.animate-slide-in-left {
  animation-name: slideInLeft;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.animate-grow-in {
  animation-name: growIn;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

@keyframes slideUp {
  0% {
	transform: translateY(100%);
  }

  100% {
	transform: translateY(0%);
  }
}

@keyframes slideInLeft {
  0% {
	transform: translateX(-100%);
	opacity: 0;
  }
  100% {
	transform: translateX(0%);
	opacity: 1;
  }
}

@keyframes growIn {
  0% {
	transform: scale(0.9);
	opacity: 0;
  }

  100% {
	transform: scale(1);
	opacity: 1;
  }
}